<template lang="html">
<div class="redeem-code-page normal-table-page">
	<Card :dis-hover="true">
		<p slot="title">
			<Icon type="play"></Icon> 视频管理
		</p>
		<div slot="extra">

			<Input v-model="searchKey" class="search-input" icon="search" placeholder="视频名称" style="width: 300px" @keydown.native.enter="doSearch"></Input>
			<Button type="ghost" class="add-new-btn" v-if="searchKey" @click="clearSearch()">清空</Button>

			<Button type="ghost" class="add-new-btn" icon="plus" @click="showModal = true">新增</Button>
		</div>
		<Table :columns="videoCtrlTableColumns" :loading="pageLoading" ref="videoCtrlTable" border :data="videoCtrlList"></Table>

		<!-- <transition name="fade">
			<div class="loading-cover" v-if="pageLoading">
				<Spin fix size="large"></Spin>
			</div>
		</transition> -->
		<div class="page-ctrl" v-if="pageCount">
			<Page :total="pageCount" :current="pageNum" show-total show-elevator @on-change="changePage" :page-size="20">
			</Page>
		</div>
	</Card>
	<Modal :mask-closable="false" v-model="showModal" :title="selectVideo ? '编辑':'新增'" :loading="modalLoading" class-name="video-ctrl-modal" @on-ok="clickOK()">
		<Upload type="drag" :action="postUrl.doUploadVideoUrl" :data="uploadFileData" :show-upload-list="false" :before-upload="beforeUpload" :headers="{'Access-Control-Allow-Origin':'*'}" :on-success="uploadSuccess" :on-error="uploadError"
			:on-progress="uploadProgressFunc" :format="['mp4','avi']" :on-format-error="handleFormatError" class="upload-file">
			<slot>
				<Icon type="play"  size="50" :color="fileUrl?'':'rgba(0,0,0,.2)'"></Icon>
				<div slot="tip" class="tip-text">在上方拖入或点击{{selectVideo ?'替换':'上传'}}视频</div>
				<transition name="fade">
					<div class="progress" v-if="isUploading">
						<span>
							 {{uploadProgress || 0}}%
						</span>
					</div>
				</transition>
			</slot>
		</Upload>
		<Form :model="videoCtrlForm" ref="videoCtrlForm" :rules="videoCtrlFormRules">
			<FormItem label="视频名称" prop="video_name" >
				<Input v-model="videoCtrlForm.video_name" placeholder="请输入视频名称"></Input>

			</FormItem>
			<FormItem label="视频权限" prop="access_privilege_uuid">
                <Select v-model="videoCtrlForm.access_privilege_uuid"  placement="top" :transfer="true">
                    <Option value="34eae925ba6c4bcb9b9d7ae644d87920">免费视频</Option>
                    <Option value="e06661ee79ed49da9ed5e62a7ca22912">收费视频</Option>
                    <Option value="fb3fe08f4fd011e6b32e00ac1847493b">音乐会直播</Option>
                </Select>
			</FormItem>
            <!-- <FormItem label="可兑换爱豆数量" prop="love_beans_num">
                <InputNumber v-model="videoCtrlForm.love_beans_num" :min="1"></InputNumber>
            </FormItem>
            <FormItem label="生成兑换码数量" prop="add_count" v-if="!selectVideo">
                <InputNumber v-model="videoCtrlForm.add_count" :min="1"></InputNumber>
            </FormItem> -->
		</Form>
	</Modal>
</div>
</template>

<script src="./video-ctrl.js">

</script>

<style lang="scss" src='./video-ctrl.scss'>
</style>
